<template>
  <div class="item-fryer">
    <div class="m-box-con">
      <div class="m-box">
        <div class="t1">{{itemData.itemData.title1}}</div>
        <div class="p2">
          <span class="t2" v-if="!itemData.itemData.amount1.length">

            <template v-if="String(itemData.itemData.amount1)>12">
               <a-tooltip>
                  <template slot="title">
                    {{itemData.itemData.amount1}}
                  </template>
                  {{String(itemData.itemData.amount1).slice(0,8)+"..."}}
                </a-tooltip>
            </template>
            <template v-else>{{itemData.itemData.amount1}}</template>
          </span>
          <span class="t2" v-else>
            <span>
               <template v-if="String(itemData.itemData.amount1[0])>12">
                 <a-tooltip>
                    <template slot="title">
                      {{itemData.itemData.amount1[0]}}
                    </template>
                    {{String(itemData.itemData.amount1[0]).slice(0,8)+"..."}}
                  </a-tooltip>
                </template>
                <template v-else>{{itemData.itemData.amount1[0]}}</template>
            </span>
            ,
            <span>
               <template v-if="String(itemData.itemData.amount1[1])>12">
                 <a-tooltip>
                    <template slot="title">
                      {{itemData.itemData.amount1[1]}}
                    </template>
                    {{String(itemData.itemData.amount1[1]).slice(0,8)+"..."}}
                  </a-tooltip>
                </template>
              <template v-else>{{itemData.itemData.amount1[1]}}</template>
            </span>
          </span>
          <span class="icon" v-if="!itemData.itemData.amount1.length">
                        <img :src="require('../../../../assets/icon/'+'USDT'+'.png')"/>
                    </span>
          <span class="icon" v-else>
                        <img :src="require('../../../../assets/icon/'+'USDT'+'.png')"/>
                        <img :src="require('../../../../assets/icon/'+'FRIES'+'.png')"/>
                    </span>
        </div>
      </div>
      <div class="m-box" v-if="itemData.itemData.title2.length>0">
        <div class="t1">{{itemData.itemData.title2}}</div>
        <div class="p2">
          <span class="t2">{{itemData.itemData.amount2}}</span>
          <span class="icon">
                        <img :src="require('../../../../assets/icon/'+'DAI'+'.png')"/>
                    </span>
        </div>
      </div>
    </div>
    <div style="width: 100%;">
      <div>
        <a-input
          v-model="amount"
          placeholder="Input a number"
          :max-length="25"
          class="chf-input"
        ></a-input>
      </div>
      <div v-if="itemData.title=='Repay'">
        <a-input
          v-model="amountfries"
          placeholder="Input a number"
          :max-length="25"
          class="chf-input"
        ></a-input>
      </div>
      <div class="per-con">
        <a-radio-group v-model="curPer" @change="onChangePer">
          <a-radio-button :value="value*0.01" v-for="value in pers" :key="value+''">
            {{value}} %
          </a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="btn-con">
      <a-button class="che-btn" block @click="tapBtn(itemData.title)">{{itemData.title}}</a-button>
    </div>
  </div>
</template>


<script>
  import {trace} from "../../../../utils/tools"

  export default {
    components: {},
    props: {
      itemData: {},
      execute: Function,
    },
    data() {
      return {
        amount: "",
        amountfries: "",
        curPer: "",
        pers: [10, 25, 50, 75, 100],
      };
    },
    methods: {
      onChangePer(e) {
        trace(`checked = ${e.target.value}`, this.curPer);
      },
      tapBtn() {
        this.execute(this.itemData.title, {amount: this.amount, amountfries: this.amountfries})
      }
    },
    watch: {},
    computed: {},

    mounted() {

    },
  };
</script>
<style lang="less" scoped>

  ::v-deep .ant-radio-button-wrapper:not(:first-child)::before {
    background-color: transparent;
  }

  ::v-deep .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
    background-color: transparent !important;
  }

  ::v-deep .ant-radio-button-wrapper {
    border: 0 !important;
    width: 20%;
  }

  ::v-deep .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    color: white;
    background: #F499AD;
    border-color: #F499AD;
    -webkit-box-shadow: -1px 0 0 0 #F499AD;
    box-shadow: -1px 0 0 0 #F499AD;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
  }

  .item-fryer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 506px;
    margin: auto;

    .chf-input {
      width: 100%;
      height: 70px;
      box-shadow: 0px 0px 0px 1px #F499AD;
      -webkit-border-radius: 35px;
      -moz-border-radius: 35px;
      border-radius: 35px;
    }

    .btn-con {
      width: 100%;

      .che-btn {
        height: 3rem;

      }
    }

    .m-box-con {
      position: relative;
      display: flex;
      justify-content: center;
      margin: 2rem 0;
    }

    .m-box {
      width: 242px;
      height: 134px;
      padding: 32px 21px;
      margin: 12px;
      border: 2px solid green;

      .t1 {
        font-weight: normal;
        font-size: 18px;
        line-height: 21px;
        color: #868E9B;
      }

      .p2 {
        display: flex;
        align-items: center;
        margin-top: 1rem;
      }

      .t2 {
        font-weight: bold;
        font-size: 20px;
        line-height: 23px;
        color: #171717;
      }

      .icon {
        width: 28px;
        height: 28px;
        display: flex;
        margin-left: 10px;

        img {
          width: 100%;
        }
      }
    }

    .per-con {
      text-align: center;
      margin: 2rem 0;
      background: #FFFFFF;
      box-shadow: 0px 0px 0px 1px #EAEAEA;
      border-radius: 35px;
      padding: 10px;

      .ant-radio-group {
        width: 100%;
      }
    }
  }

</style>
